
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RunCode</title>
    <script src="https://minglie.gitee.io/mingpage/static/public/vue/3.2/vue.global.prod.min.js"></script>
</head>

<body>
    <div  v-cloak id="main" >
        <div class="showImg" >
            <img  @mouseover="changeInterval(true)"
                  @mouseleave="changeInterval(false)"
                  v-for="(item) in imgArr"
                  :key="item.id"
                  :src="item.url"
                  alt="暂无图片"
                  v-show="item.id===currentIndex"
            >

            <div  @click="clickIcon('up')"   class="iconDiv icon-left">
                <i class="el-icon-caret-left"></i>
            </div>

            <div  @click="clickIcon('down')"  class="iconDiv icon-right">
                <i class="el-icon-caret-right"></i>
            </div>

            <div class="banner-circle">
                <ul>
                    <li @click="changeImg(item.id)"
                        v-for="(item) in imgArr"
                        :key="item.id"
                        :class="item.id===currentIndex? 'active': '' "
                    ></li>
                </ul>
            </div>
        </div>
    </div>
</body>


</html>

<script type="module" >
    const vueConstructorData={
        name:"index",
        data(){
            return {
                currentIndex :0,//当前所在图片下标
                timer:null,//定时轮询
                imgArr:[
                    {	id:0,
                        url:"https://6d69-minglie-31e331-1302367385.tcb.qcloud.la/h/%E7%8E%8B%E8%8E%B9%E4%B8%BD.jpg",
                    },{
                        id:1,
                        url:"https://langjie.oss-cn-hangzhou.aliyuncs.com/static/tiger_guess/avatar/oxIzxsqjvRcWGTAYpuxc436-kKHs.jpg",
                    },{
                        id:2,
                        url:"https://langjie.oss-cn-hangzhou.aliyuncs.com/static/tiger_guess/avatar/oxIzxsptFj2nXxym324gF7zlBDqE.jpg",
                    },{
                        id:3,
                        url:"https://langjie.oss-cn-hangzhou.aliyuncs.com/static/tiger_guess/avatar/oxIzxsoiNWnHUElkc3gRFtIfRpVw.jpg",
                    },
                ]
            }
        },
        methods:{
            //开启定时器
            startInterval(){
                // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
                clearInterval(this.timer);
                this.timer = setInterval(()=>{
                    this.currentIndex++;
                    if(this.currentIndex > this.imgArr.length-1){
                        this.currentIndex = 0
                    }
                },3000)
            },
            // 点击左右箭头
            clickIcon(val){
                if(val==='down'){
                    this.currentIndex++;
                    if(this.currentIndex===this.imgArr.length){
                        this.currentIndex = 0;
                    }
                }else{
                    if(this.currentIndex === 0){
                        this.currentIndex = this.imgArr.length;
                    }
                    this.currentIndex--;
                }
            },
            // 点击控制圆点
            changeImg(index){
                this.currentIndex = index
            },
            //鼠标移入移出控制
            changeInterval(val){
                if(val){
                    clearInterval(this.timer)
                }else{
                    this.startInterval()
                }
            }
        },

        computed:{

        },
        async mounted() {
            this.startInterval()
        }
    }
    const {createApp}=Vue;
    const vueApp= createApp(vueConstructorData);
    vueApp.mount('#main');
</script>



<style>
    * {
        padding: 0;
        margin: 0;
    }
    /* 清除li前面的圆点 */
    li {
        list-style-type: none;
    }
    .showImg{
        position: relative;
        width: 40%;
        height: 250px;
        margin: 100px auto;
        overflow: hidden;
    }
    /* 轮播图片 */
    .showImg img{
        width: 100%;
        height: 100%;
    }

    /* 箭头图标 */
    .iconDiv{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        border: 1px solid #666;
        border-radius: 15px;
        background-color: rgba(125,125,125,.2);
        line-height: 30px;
        text-align: center;
        font-size: 25px;
        cursor: pointer;
    }
    .iconDiv:hover{
        background-color: white;
    }
    .icon-left{
        left: 10px;
    }
    .icon-right{
        right: 10px;
    }

    /* 控制圆点 */
    .banner-circle{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 20px;
    }
    .banner-circle ul{
        margin: 0 50px;
        height: 100%;
        text-align: right;
    }
    .banner-circle ul li{
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 5px;
        border-radius: 7px;
        background-color: rgba(125,125,125,.8);
        cursor: pointer;
    }
    .active{
        background-color: black !important;
    }

</style>






